<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>销售订单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../component/elementUI/index.css">
  <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
  <div id="app" class="minWidth">
    <el-form :inline="true" :form="form">
      <el-form-item>
        <el-button type="danger" @click="back">返回</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.serachKey" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSerach">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExcel">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="dialogVisible1 = true">导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :type="multipleSelection.length>0?'success':'info'" icon="el-icon-edit" @click="AddMember">订单分配</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" id="out-table" stripe border height="calc(100vh - 140px)" @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column prop="Sales_Order_Detail_SerialNumber" label="销售订单明细流水号"></el-table-column>
      <el-table-column prop="Store_SerialNumber" label="门店号">
        <template v-slot="{row}">
           {{Store_Name(row.Store_SerialNumber)}}
        </template>
      </el-table-column>
      <el-table-column prop="Sales_Date" label="销售日期">
        <template v-slot="{ row }">
            {{formatTime(row.Sales_Date)}}
        </template>
      </el-table-column>
      <el-table-column prop="Row_Status" label="订单状态" width="90">
        <template v-slot="{ row }">
          <el-tag v-if="row.Row_Status==1" size="small">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="Sign" label="订单类型" width="90"></el-table-column>
      <el-table-column prop="Article_SerialNumber" label="商品">
        <template v-slot="{row}">
           {{Article_Name(row.Article_SerialNumber)}}
        </template>
      </el-table-column>
      <el-table-column prop="Quantity" label="数量"></el-table-column>
      <el-table-column prop="Sales_Unit_Price" label="销售单价"></el-table-column>
      <el-table-column prop="Amount" label="销售金额"></el-table-column>
      <el-table-column prop="Article_SerialNumber" label="可选择供应商">
        <template v-slot="{row}">
          {{Supplier_Article(row.Article_SerialNumber)}}
        </template>
      </el-table-column>

    </el-table>
    <el-pagination background v-show="total > 0" @size-change="getList" @current-change="getList"
      :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-dialog title="订单分配" width="50%" :visible.sync="dialogVisible">
      <el-table :data="multipleSelection">
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column property="Sales_Order_Detail_SerialNumber" label="订单号"></el-table-column>
        <el-table-column prop="Store_SerialNumber" label="门店">
          <template v-slot="{row}">
            {{Store_Name(row.Store_SerialNumber)}}
          </template>
        </el-table-column>
        <el-table-column prop="Article_SerialNumber" label="商品">
          <template v-slot="{row}">
            {{Article_Name(row.Article_SerialNumber)}}
          </template>
        </el-table-column>
        <el-table-column property="Quantity" label="数量"></el-table-column>
        <el-table-column label="分配供应商" type="index" width="250">
          <template slot-scope="scope">
            <el-select v-model="data[scope.$index].Supplier_SerialNumber" placeholder="请选择供应商">
              <el-option v-for="(item,index) in dataArr[scope.$index]" :label="item.Supplier_Name" :value="item.Supplier_SerialNumber"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table> 
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入订单" :visible.sync="dialogVisible1">
      <el-upload id="Excel" class="upload-demo"  action="" :before-remove="beforeRemove" 
        :file-list="fileList" :before-upload="uploadDetails">
        <el-button size="small" type="primary" v-show="fileList.length<1">导入</el-button>
        <div slot="tip" class="el-upload__tip" v-show="fileList.length<1">请上传xlsx表格</div>
      </el-upload>
      <el-table :data="form2">
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column prop="Sales_Order_Detail_SerialNumber" label="订单号"></el-table-column>
        <el-table-column prop="Store_SerialNumber" label="门店">
          <template v-slot="{row}">
            {{Store_Name(row.Store_SerialNumber)}}
          </template>
        </el-table-column>
        <el-table-column prop="Article_SerialNumber" label="商品">
          <template v-slot="{row}">
            {{Article_Name(row.Article_SerialNumber)}}
          </template>
        </el-table-column>
        <el-table-column prop="Quantity" label="数量"></el-table-column>
        <el-table-column prop="Supplier_SerialNumber" label="分配供应商">
          <template v-slot="{row}">          
            {{Supplier_Name(row.Supplier_SerialNumber)}} 
          </template> 
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="addEnterprise">提交</el-button>
      </div>
    </el-dialog>
  </div>
  <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
  <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
  <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
  <script type="text/javascript" src="./js/Details.js"></script>
</body>

</html>